<template>
    <SearchTable 
        :columns="columns"
        :data="data"
        :total="total"
        :page.sync="query.pageIndex"
        :size.sync="query.pageSize"
        @queryFun="queryList">
        <QueryForm slot="search" :queryForm="queryForm" :freshList="refreshList"></QueryForm>
        <EditModal ref="editModal" :contentId="contentId" :taskId="taskId" @refresh="refreshList"></EditModal>
        <Modal v-model="previewModal.show" :title="previewModal.title" footer-hide>
            <div v-html="previewModal.content"></div>
        </Modal>
        <Modal v-model="approvalModal.show" :title="approvalModal.title" @on-ok="checkReport(approvalModal.data.id,{approvalInfo:approvalModal.approvalInfo,status:2})">
           <div class="flex" style="align-items: flex-start;">
            <span style="flex:none">驳回理由：</span>
            <Input v-model="approvalModal.approvalInfo" type="textarea"></Input></div>
        </Modal>
    </SearchTable>
</template>
<script>
import EditModal from './edit.vue';
import { mapGetters, mapState, mapMutations } from 'vuex';
import { getReportList, delReport, checkReport } from '../../api/report.js';
import QueryForm from '@/components/common/page/queryForm.vue'
import {getFileInfos} from "../../../../api/uploadFile";
import toFixed from "xe-utils/toFixed";
export default {
    name: 'SummaryList',
    props: {
        taskId:{
            type:String,
            default:''
        },
        taskStatus:{
            type:Number,
            default:0
        }
    },
    inject: ['detailParent'],
    components: {  EditModal,QueryForm },
    computed: {
        ...mapState('user', ['userId', 'isRootDesigner']),
        contentId() {
            return this.detailParent.contentDetail.id;
        },
        step(){
            return this.detailParent.step;
        },
        disabledAllBtn(){
            return this.detailParent.disabledAllBtn
        },
    },
    // mixins: [typeAndDirectionMixin],
    data() {
        return {
            previewModal: {
                show: false,
                content: ''
            },
            approvalModal:{
                show: false,
                title:'驳回',
                approvalInfo: ''
            },
            title: '',
            query:{
                pageIndex:1,
                pageSize:10,
                taskId:this.taskId
            },
            queryFun: this.queryList, //分页
            queryForm: [
                {
                    id: 'import',
                    type: 'Button',
                    icon: 'ios-add',
                    text: '上传科研文档',
                    fun: () => {
                        this.showEditModal('', 'import');
                    },
                    show:() => {
                        return !this.isRootDesigner && this.step !== 2 && this.taskStatus !== 1
                    }
                },
                // {
                //     id: 'add',
                //     type: 'Button',
                //     icon: 'ios-add',
                //     text: '创建科研小结',
                //     fun: this.showEditModal
                // },
                {
                    id: 'creator',
                    type: 'checkbox',
                    text: '由我创建'
                },
                { id: 'fileName', type: 'Input', placeholder: '请输入文件名称' },
                { id: 'refresh', type: 'Button', icon: 'ios-refresh', fun: this.refreshList }
            ],
            columns: [
                // {
                //     title: '小结名称',
                //     key: 'name',
                //     placement: 'top-left'
                // },
                // {
                //     title: '小结类型',
                //     key: 'fileName',
                //     render: (h, { row: { type } }) => {
                //         return h('span', type === 0 ? '富文本' : '文档');
                //     }
                // },
                {
                    title: '文件名',
                    key: 'fileName',
                    tooltip:true,
                    render: (h, { row: { fileName } }) => {
                        return h('span', fileName || '-');
                    }
                },
                {
                    title: '状态',
                    key: 'status',
                    filter:(status) => {
                        let txt;
                        if(status === 0){
                            txt = '未审核'
                        }else if(status === 1){
                            txt = '已通过'
                        }else if(status === 2){
                            txt = '已驳回'
                        }else if(status === 3){
                            txt = '驳回会后修改'
                        }
                        return txt;
                    },
                    setColor: (status) => {
                        return status === 0 || status === 3 ? 'var(--status-pre)' : status === 1 ? 'var(--status-yes)' : 'var(--status-no)'
                    },
                },
                {
                    type:'html',
                    title: '备注',
                    key: 'remark'
                },
                {
                    title:"驳回理由",
                    key: 'approvalInfo',
                    tooltip:true
                },
                {
                    title: '审核时间',
                    key: 'approvalTime'
                },
                {
                    title: '提交时间',
                    key: 'createTime'
                },
                {
                    title: '操作',
                    placement: 'top-right',
                    key:'action',
                    width:this.isRootDesigner && this.step === 2 ? 180 : 180,
                    opList:[
                        {
                            txt:'修改',
                            disabled: data => data.status === 1,
                            show:() => {
                                return !this.isRootDesigner
                            },
                            on: {
                                click: (data) => {
                                    this.showEditModal(
                                        {...data,status:status === 2 ? 4 : status,},
                                        data.type === 1 ? 'import' : ''
                                    );
                                }
                            }
                        },
                        {
                            txt:'下载',
                            fun:this.download
                        },
                        {
                            txt:'预览',
                            disabled:data => this.isDisabledType(data.fileName) && data.type === 1,
                            fun:(data) => {
                                if (data.type === 1) {
                                    getFileInfos(data.fileId).then(res=>{
                                      let msize100 = 1024*1024*100 
                                      if(res.data && res.data.data && res.data.data.size && (res.data.data.size/msize100)>1){
                                        let size = (res.data.data.size/1024/1024).toFixed()
                                        this.$Message.warning(`当前文件${size}MB，大于100MB的文件请下载后在本地查看`)
                                      }else {
                                        window.openTrain(
                                            `/api/minio/filePreview?path=${data.path}`
                                        );
                                      }
                                    })
                                  
                                } else {
                                    this.previewModal.show = true;
                                    this.previewModal.title = data.name;
                                    this.previewModal.content = data.remark;
                                }
                            }
                        },
                        {
                            txt:'通过',
                            tooltip:true,
                            title:'确认通过？',
                            disabled:data => data.status === 1 || this.disabledAllBtn,
                            show:() => {
                                return this.isRootDesigner && this.step === 2
                            },
                            fun:(data) => {
                                this.checkReport(data.id,{status:1})
                            }
                        },
                        {
                            txt:'驳回',
                            show:() => {
                                return this.isRootDesigner && this.step === 2
                            },
                            disabled:data => data.status === 2 || this.disabledAllBtn,
                            fun:(data) => {
                                this.approvalModal.show = true;
                                this.approvalModal.data = data;
                                this.approvalModal.approvalInfo = data.approvalInfo;
                            }
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            title:'确认删除？',
                            tooltip:true,
                            disabled: data => data.status === 1,
                            fun:this.delItem,
                            show:() => {
                                return !this.isRootDesigner
                            },
                        },
                    ],
                }
            ],
            data: [],
            total: 0
        };
    },
    mounted() {
        this._query = {...this.query},
        this.queryList()
    },
    methods: {
        queryList() {
            let params = {
                taskId:this.taskId,
                contentId: this.contentId,
                ...this.query,
                creator: this.query.creator ? this.userId : ''
            };
            getReportList(params).then((res) => {
                if (res.code == 1) {
                    const data = res.data.items;
                    this.data = data;;
                    this.total = res.data.total;
                    // this.detailParent.updateDetail({ summaryTotal: res.data.total });
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        search() {
            this.query.pageIndex = 1;
            this.queryList();
        },
        refreshList(query = {}) {
            this.query = {...this._query,...query};
            this.queryList();
        },
        delItem(params) {
            delReport(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        checkReport(id,data){
            checkReport(id,data).then(({code,data,message}) => {
                if(code === 1){
                    this.$Message.info(message);
                    this.queryList();
                }else{
                    this.$Message.error(message);
                }
            })
        },
        showEditModal(data, type) {
            this.$refs.editModal.showModal(data, type);
        },
        isDisabledType(name) {
            let list = name.split('.');
            let lastStr = list
                .pop()
                .trim()
                .toLowerCase();
            if (list.length < 1) {
                // 没有后缀名需要禁用
                return true;
            } else {
                let othersArr = ['zip', 'bz2', '7z', 'cab', 'rar', 'epub']; // 需要被禁用的类型
                return othersArr.includes(lastStr);
            }
        },
        // 下载文件
        download(item) {
            let a = document.createElement('a');
            let fileName = item.fileName; //filename名称截取
            a.href = `/api/minio/download?path=${item.path}`;
            a.download = fileName; //命名下载名称
            a.click(); //点击触发下载
        },
    },
    beforeDestroy() {
        
    }
};
</script>

<style  scoped>
.summary-wrapper {
    padding: 0;
    margin: 0;
    height: 0;
    flex: auto;
}
.filter-wrap {
    margin-top: 10px;
    font-size: 14px;
    color: #8f90a6;
}
</style>
